<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>vue</title>
  </head>
  <script src="./vue.js"></script>
  <body>
    <!-- 模板 -->
    <div id="example">
      <!-- 文本框 -->
      <input v-model="message" placeholder="edit me" />

      <p>Message is: {{ message }}</p>

      <!-- 复选框 -->

      <input type="checkbox" id="checkbox" v-model="checked" />

      <label for="checkbox">{{ checked }}</label>

      <p>
        <input type="checkbox" id="jack" value="Jack" v-model="checkedNames" />
        <label for="jack">Jack</label>

        <input type="checkbox" id="john" value="John" v-model="checkedNames" />
        <label for="john">John</label>

        <input type="checkbox" id="mike" value="Mike" v-model="checkedNames" />
        <label for="mike">Mike</label>
        <br />
        <span>Checked names: {{ checkedNames }}</span>
      </p>

      <!-- 单选框 -->

      <div>
        <input type="radio" id="one" value="One" v-model="picked" />
        <label for="one">One</label>
        <br />
        <input type="radio" id="two" value="Two" v-model="picked" />
        <label for="two">Two</label>
        <br />
        <span>Picked: {{ picked }}</span>
      </div>

      <!-- 选择列表 -->

      <div>
        <select v-model="selected1">
          <option disabled value="">请选择</option>
          <option>A</option>
          <option>B</option>
          <option>C</option>
        </select>
        <span>Selected: {{ selected1 }}</span>
      </div>

      <br /><br />

      <div>
        <select v-model="selected2" multiple>
          <option disabled value="">请选择</option>
          <option>A</option>
          <option>B</option>
          <option>C</option>
        </select>
        <span>Selected: {{ selected2 }}</span>
      </div>

      <div>
        <input v-model.lazy="msg" />

        <span>{{ msg }}</span>
      </div>
    </div>

    <script>
      //数据

      let data = {
        msg: 'abc',

        message: 'vue学习计划',

        checked: false,

        checkedNames: [],

        picked: '',

        selected1: '',

        selected2: []
      }

      //vm实例

      var vm = new Vue({
        el: '#example',

        data: data
      })
    </script>
  </body>
</html>
